<template>
  <div class="container">

    <div class="card mt-3">
      <div class="card-header">
        修改密码
      </div>
      <div class="card-body">
        <form class="profile-form">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input v-model="form.username" type="text" class="form-control" id="username">
          </div>

          <div class="mb-3">
            <label for="oldPassword" class="form-label">旧密码</label>
            <input v-model="form.oldPassword" type="password" class="form-control" id="oldPassword" placeholder="留空则不修改">
          </div>

          <div class="mb-3">
            <label for="newPassword" class="form-label">新密码</label>
            <input v-model="form.newPassword" type="password" class="form-control" id="newPassword" placeholder="留空则不修改">
          </div>

          <div class="mb-3">
            <label for="conPassword" class="form-label">确认密码</label>
            <input v-model="form.conPassword" type="password" class="form-control" id="conPassword" placeholder="留空则不修改">
          </div>

          <button @click="submit" type="button" class="btn btn-primary">提交</button>
        </form>
      </div>
    </div>

  </div>

</template>

<script>
import request from '@/http/request'
import {ElMessage} from 'element-plus'

export default {
  name: 'Profile',
  data() {
    return {
      form: {
        username: '',
        oldPassword: '',
        newPassword: '',
        conPassword: '',
      },
    }
  },

  methods: {
    submit() {
      request.updateProfile(this.form).then(response => {
        ElMessage.success(response.data.message)
        setTimeout(() => {
          location.reload()
        }, 800)
      }).catch(error => {
        ElMessage.error(error.response.data.message)
      })
    },
  },

  mounted() {
    request.getLoginStatus().then(response => {
      this.form.username = response.data.result.username
    })
  },
}
</script>

<style scoped>

</style>